<template>
  <van-row>
    <div class="top"></div>
    <img src="../../assets/cover.jpg" width="100%" height="500" alt="">
    <van-cell-group>
      <van-field
        v-model="userName"
        type="text"
        label="用户名"
        left-icon="contact"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="userPsd"
        type="password"
        label="密码"
        left-icon="records"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <div class="bottom" style="margin-top: 20px;margin-bottom: 100px">
      <van-row type="flex" justify="space-around">
        <van-button size="normal" type="primary" style="cursor: pointer" @click=" login()">&nbsp登 录 &nbsp</van-button>
        <van-button size="normal" type="primary" style="cursor: pointer" @click="goFindPassword()">注册</van-button>
        <van-button size="normal" type="danger" style="cursor: pointer" @click="goFindPassword()">找回密码</van-button>
      </van-row>
    </div>
  </van-row>
</template>

<script>
import {baseUrl} from '../constants'
export default {
  name: 'user',
  data () {
    return {
      userName: '',
      userPsd: ''
    }
  },
  methods: {
    //登录
    login(){
      let data = {
        userName: this.userName,
        userPsd: this.userPsd
      };
      this.axios.post(baseUrl.serverUrl+'/user/login',data).then(res=>{
         if(res.data.status==1&&res.data.data[0]){
           let id = res.data.data[0].id;
           //登录成功。保存登录状态
           this.$dialog.alert({
             message:'登录成功即将跳回主页'
           });
           //设置状态管理
           this.$store.commit('set_userid',{id,isLogin:true});
           this.$router.push('/home');
         }else {
           this.$dialog.alert({
             message:'登录失败请检查用户名和密码'
           });
           //设置状态管理
           this.$store.commit('set_userid',{id:'',isLogin:false});
         }
      })
    },
    //去到找回密码
    goFindPassword(){
      this.$router.push('/find');
    }
  }
}
</script>

<style scoped>
</style>
